<template>
  <div class="me-code-top">
    <div class="me-quick-form">
      <el-row>
        <el-col :span="20">
          <el-form :inline="true" ref="entityFormRef">
            <template v-for="item in vueData.quickList">
              <el-form-item v-if="item.dataType === dataType.STR.val" :label="item.name" :prop="item.code">
                <el-input v-model="item.val" :maxlength="100" />
              </el-form-item>
              <el-form-item v-if="item.dataType === dataType.NUM.val" :label="item.name" :prop="item.code">
                <el-input-number v-model="item.startVal" controls-position="right" style="width: 50px;" />
                <span style="margin: 0 2px">~</span>
                <el-input-number v-model="item.endVal" controls-position="right" style="width: 50px;" />
              </el-form-item>
              <el-form-item v-if="item.dataType === dataType.DATE.val" :label="item.name" :prop="item.code">
                <el-date-picker v-model="item.range" type="daterange" range-separator="~" :shortcuts="vueData.shortcuts" />
              </el-form-item>
            </template>
          </el-form>
        </el-col>
        <el-col :span="2" :offset="2">
          <el-button-group class="ml-4">
            <el-button type="default" icon="Search" @click="handleSearch" />
            <el-button type="default" icon="Brush" @click="handleReset" />
            <el-button type="default" icon="Filter" @click="showAdvanceWin" />
          </el-button-group>
        </el-col>
      </el-row>
    </div>
    <el-drawer v-model="vueData.advanceShow" title="高级搜索" size="20%">
      <span>Hi, there!</span>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="cancelClick">取消</el-button>
          <el-button type="primary" @click="confirmClick">搜索</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script name="CodeSearch" setup>
import { reactive, watchEffect } from 'vue';
import PropEnum from '@/store/enums/PropEnum';
import { SwitchEnum } from '@/store/enums/SwitchEnum';
import { dateRangeArr } from '@/store/constants/DataConstants';
const { dataType } = PropEnum;

const props = defineProps({
  modelInfo: {
    required: true,
    type: Object
  },
});

const vueData = reactive({
  quickList: [],
  advanceList: [],
  advanceShow: false,
  quickNum: 3,
  shortcuts: dateRangeArr,
});

const emit = defineEmits();
function handleSearch() {
  emit('load', { page: 1 });
}

function handleReset() {
  vueData.quickList.forEach((it) => {
    it.val = null;
    it.startVal = null;
    it.endVal = null;
    if (it.queryType === 'between') {
      it.range = [];
    } else {
      it.range = null;
    }
  });
  handleSearch();
}

function showAdvanceWin() {
  vueData.advanceShow = true;
}

function cancelClick() {
  vueData.advanceShow = false;
}

function confirmClick() {
  vueData.advanceShow = false;
  emit('pagination', { page: 1 });
}

function getCondList() {
  const cl = [];
  vueData.quickList.forEach((it) => {
    let cc = {
      code: it.code,
      name: it.name,
      hideCode: it.hideCode,
      colCode: it.colCode,
      dataType: it.dataType,
      queryType: it.queryType,
      val: it.val,
      startVal: it.startVal,
      endVal: it.endVal,
    };
    if (it.range && it.range.length === 2) {
      cc.startVal = it.range[0];
      cc.endVal = it.range[1];
    }
    if ((cc.queryType === 'between' && cc.startVal != null && cc.endVal != null)
      || (cc.queryType !== 'between' && cc.val != null && cc.val.trim() !== '')) {
      cl.push(cc);
    }
  });
  return cl;
}

function loadQueryList(propList) {
  let quickList = [];
  let advanceList = [];
  for (let i = 0; i < propList.length; i++) {
    let it = propList[i];
    if (it.advanceSw === SwitchEnum.OPEN) {
      let comCond = {
        code: it.code,
        name: it.name,
        hideCode: it.hideCode,
        colCode: it.colCode,
        dataType: it.dataType,
        val: null,
        startVal: null,
        endVal: null,
      };
      if (it.quickSw === SwitchEnum.OPEN) {
        const qc = { ...comCond };
        if (it.dataType === dataType.DATE.val || it.dataType === dataType.NUM.val) {
          qc.queryType = 'between';
          if (it.dataType === dataType.DATE.val) {
            qc.range = [];
          }
        } else {
          qc.queryType = 'like';
        }
        quickList.push(qc);
      }
      const ac = { ...comCond };
      if (it.dataType === dataType.DATE.val || it.dataType === dataType.NUM.val) {
        ac.queryType = 'between';
        if (it.dataType === dataType.DATE.val) {
          ac.range = [];
        }
      } else {
        ac.queryType = 'like';
      }
      advanceList.push(ac);
    }
  }
  vueData.quickList = quickList;
  vueData.advanceList = advanceList;
}

watchEffect(() => {
  if (props.modelInfo != null && props.modelInfo.propList) {
    let propList = props.modelInfo.propList;
    loadQueryList(propList);
  }
});

defineExpose({
  getCondList,
});
</script>

<style lang='scss' scoped>
.me-code-top {
  width: 100%;

  .me-quick-form {
    display: inline-block;
    width: 100%;
  }
}
</style>
